<template>
  <div class="detail">
    
    <section>
        <header>
            <!-- 刚进入页面所展示的头部栏 -->
            <div class="header-return" v-show="isShow">
                <i class="iconfont" @click="goBack">&#xe624;</i>
                <i class="iconfont" @click="goHome">&#xe603;</i>
            </div>
            <div class="header-main" v-show="!isShow" :style="styleOpacity">
                <i class="iconfont" @click="goBack">&#xe624;</i>
                <span  ref="returnDetail" >商品详情</span>
                <span  @click="goodsPicture" >商品图片</span>
                <i class="iconfont"  @click="goHome">&#xe603;</i>
            </div>
        </header>
    <!-- 轮播图 -->
        <!-- <div class='swiper-main'>
            <swiper :options="swiperOption">
                <swiper-slide 
                    v-for='(item,index) in swiperList' 
                    :key='index'
                >
                    <img :src="item.imgUrl" alt="">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination">
                </div>
            </swiper>
        </div> -->
        <div class="goods_img">
            <img :src="goods.imgUrl" alt="">
        </div>
    
        <div class="goods_name">
            <h1>{{goods.name}}</h1>
            <div>{{goods.content}}</div>
        </div>
        <div class="goods_price">
            <div class="pprice">
                <span>￥</span>
                <b>{{goods.price}}</b>
            </div>
            <div class="oprice">
                <span>价格:</span>
                <del>{{goods.price}}</del>
            </div>
        </div>
        <div class="goods_detail" ref="detailPicture">
            <h4>——商品详情图——</h4>
            <ul>
                <li v-for="(i,idx) in goods.imgDetail" :key="idx">
                    <img :src="i" alt="">
                </li>
            </ul>
            <h4>已经到底啦~</h4>
        </div>
        
    </section>
    <footer>
        <div class="add-cart" @click="addCart">加入购物车</div>
        <div @click="addCart">立即购买</div>
    </footer>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

//引入axios的二次封装
import http from '@/common/api/request.js'

//引入弹窗组件
import { Toast } from 'mint-ui';


export default {
    name:'Detail',
    data(){
    return{
        //控制顶部栏
        isShow:true,
        //控制顶部栏透明度 实现渐变效果
        styleOpacity:{},
		// swiperOption: {//swiper3 具体使用看vue-awesome-swiper的使用说明 太高版本不行就下载低版本
		// 	autoplay: {
        //         delay: 2500,
        //         disableOnInteraction: false//是否禁用自动播放 默认为是
        //         },
		// 	speed: 800,
        //     loop: true, // 开启循环模式
		// 	pagination: {
		// 		el: '.swiper-pagination',
        //         dynamicBullets: true,
        //         clickable: true, 
        //         type:'fraction'
		// 	}
		// },
        // swiperList:[
        //     {id:1,name:'dalibao-detail1',imgUrl:'./images/dalibao-detail1.jpeg'},
        //     {id:2,name:'dalibao-detail1',imgUrl:'./images/dalibao-detail2.jpeg'},
        //     {id:3,name:'dalibao-detail1',imgUrl:'./images/dalibao-detail3.jpeg'}
        // ],
        //获取到的商品数据
        goods:{},
        isTop:true,//默认为true,用于判断用户是否回到顶部
        }
    },
    components:{
        swiper,
        swiperSlide
    },
    created(){
        this.id = this.$route.query.id
        window.scrollTo(0,0);
        this.getData()
    },
    mounted(){
        //添加事件监听函数 当窗口滑动时执行handleScroll函数
        window.addEventListener('scroll', this.handleScroll)
        //添加事件监听
        window.addEventListener('scroll',this.goodsDetail)
     
    },
    activated(){
        window.scrollTo(0,0);
        //判断当前url id和之前id是否一致
        if(this.$route.query.id !==this.id){
            this.getData()
            this.id = this.$route.query.id
        }
       
    },
    //最后记得摧毁监听
    destroyed(){
        window.removeEventListener('scroll', this.handleScroll)
        window.removeEventListener('scroll', this.goodsDetail)
       
    },
    methods:{
        handleScroll(){
            // doucument获取滚动距离
            // console.log(document.documentElement.scrollTop)
            if(document.documentElement.scrollTop>50){
                //让透明度动态的为一个值
                let opacity = document.documentElement.scrollTop /200
                opacity > 1 ? 1 : opacity
                this.styleOpacity = {
                    opacity:opacity,
                }
                this.isShow = false
            }else{
                this.isShow = true
            }
            
        },
        goBack(){
            this.$router.go(-1)
        },
        goHome(){
            this.$router.push({
                path: '/home',
            })
        },
        //获取数据
        async getData(){
            let id = this.$route.query.id
            let res = await http.$axios({
                url:'/api/goods/id',
                params:{
                    id
                }
            })
            //在数据库中通过逗号分隔了图片路径 所以通过split方法把字符串分割为数组
            res.imgDetail=res.imgDetail.split(',')
            
            this.goods = res
            // console.log(this.goods )
            
        },
        //加入购物车
        addCart(){
            let id = this.$route.query.id
            http.$axios({
                url:'/api/addCart',
                method:'POST',
                data:{
                    goodsId:id,
                },
                //给后端传值 证明该请求需要验证
                headers:{
                    token:true
                }
            }).then(res=>{
                if(res.success){
                    Toast(res.msg)
                }
            })
        },
        //跳转至商品文字描述
        goodsDetail(){
        //    window.scrollTo(0,0);
        var timer = null; //定义一个定时器      
        this.isTop = false;
        //通过ref获取html元素并添加点击事件
        this.$refs.returnDetail.onclick=function(){
            timer = setInterval(function(){
                    //获取滚动条的滚动高度
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //用于设置速度差，产生缓动的效果
                    var speed = Math.floor(-osTop / 10);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
                    this.isTop =true;  //用于阻止滚动事件清除定时器
                    if(osTop == 0){
                        clearInterval(timer);
                    }
                },5);
        }
        
        },
        //滑动至商品描述图
        goodsPicture(){
            this.$refs.detailPicture.scrollIntoView({behavior:'smooth'})
        }
        
    }

}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
.detail{
    header{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: ( 44 / @rootsize);
        .header-return{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: ( 44 / @rootsize);
            align-items: center;
            i{
                display: inline-block;
                margin: 0 (10 / @rootsize);
                width: (34 / @rootsize);
                height: (34 / @rootsize);
                text-align: center;
                line-height: (34 / @rootsize);
                color: #fff;
                background-color:rgba(0, 0, 0, .3);
                border-radius: 50%;
                font-size: (22 / @rootsize);
            }
        }
        .header-main{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: ( 44 / @rootsize);
            align-items: center;
            background-color: #fff;
            z-index: 999;
            i{
                margin: 0 (10 / @rootsize);
                font-size: (20 / @rootsize);
            }
            span{
                padding:0 (10 / @rootsize);
                font-size: (16 / @rootsize);
            }
        }
    }
   
    section{
        margin-bottom: (50 / @rootsize);
        // .swiper-main{
        //     position: relative;
        //     width: 100%;
        //     height: (375 / @rootsize);
        //     img{
        //         width: 100%;
        //         height: (375 / @rootsize);
        //     }
        //     .swiper-pagination{
        //         padding-right: (20 / @rootsize);
        //         padding-bottom: (10 / @rootsize);
        //         width: 100%!important;
        //         text-align: right;
        //         font-size: (16 / @rootsize);
        //         font-weight: 300;
        //         color: white;
        //         z-index: 999;
        //     }
        //     .swiper-pagination::before{
        //         content: ' ';
        //         position: absolute;
        //         right: 15px;
        //         top: 0;
        //         background-color: rgba(0, 0, 0 ,.5);
        //         width: (43  / @rootsize);
        //         height: (20 / @rootsize);
        //         z-index: -1;
        //     }
        //     ::v-deep .swiper-pagination-bullet-active{
        //         background-color: #b0352f;
        //     }
        //     .swiper-pagination-bullet{
        //         margin: 0 (4 /@rootsize);
        //     }
        // }
        .goods_img{
            width: 100%;
            height: (375 / @rootsize);
            img{
                width: 100%;
            height: (375 / @rootsize);
            }
        }
        .goods_name{
            padding: (20  / @rootsize) (10 / @rootsize);
            border-bottom: 1px solid #ccc;
            h1{
                font-size: (18 / @rootsize);
                font-weight: 500;
            }
            div{
                padding: (5 / @rootsize) 0;
                font-size: (14 / @rootsize);
                color: #999;
            }
        }
        .goods_price{
            padding: 0 (10 / @rootsize);
            .pprice{
                color: #b0352f;
                span{
                    margin-right: (7 / @rootsize);
                    font-size: (14 / @rootsize);
                }
            }
            .oprice{
                color: #999;
                font-size: (12 / @rootsize);
            }
        }
        .goods_detail{
            padding-top: (44 / @rootsize);
            width: 100%;
            h4{
                text-align: center;
                font-size: (14 / @rootsize);
                color: #999;
                font-weight: 400;
            }
            ul{
                padding: (30 / @rootsize) (15 / @rootsize);
                li{
                    margin-bottom:(10 / @rootsize) ;
                img{
                    width: 100%;
                }
            }
            }
            
            
        }
    }
    footer{
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #ccc;
        width:100% ;
        height: (49 / @rootsize);
        background-color: #fff;
        z-index: 999;
        div{
            width: 50%;
            line-height:(49 / @rootsize) ;
            text-align: center;
            font-size: (16 / @rootsize );
            color: #fff;
            background-color: #b0352f;
        }
        .add-cart{
            background-color: #ff9500;
        }
    }
}

</style>